<script setup>
import { ref } from 'vue'
import VueOfficePdf from '@vue-office/pdf'
import { FILE_TYPE } from '@/constants/appname'
import { getDocList } from '@/api/file'
const props = defineProps({
  appname: String,
  category: String,
  bucketName: String,
})
const docList = ref([])
async function doGetDocList() {
  await getDocList(props.appname, props.category, FILE_TYPE.PDF).then(res => {
    console.log(res.data)
    docList.value = res.data.data
  })
}
doGetDocList()

const pdf = ref('')
function errorHandler() {
  console.log("渲染失败")
}
function getName(pdf) {
  return pdf.split("/").at(-1)
}
</script>

<template>
  <el-row>
    <el-col :span="4" class="docCol">
      <el-menu class="docMenu">
        <el-menu-item v-for="(item, index) in docList" :key="index" @click="pdf = item.url" :index="index">{{ item.name
          }}</el-menu-item>
      </el-menu>
    </el-col>
    <el-col :span="20">
      <vue-office-pdf v-show="pdf" :src="pdf" style="width: 75%; height: 70vh; margin-left: 50%; translate: -50%;"
        @error="errorHandler" />
    </el-col>
  </el-row>

  <a class="iconfont icon-xiazai" v-show="pdf" :href="pdf" :download="getName(pdf)"></a>

</template>

<style scope lang="less">
.docMenu {
  font-weight: 300;
  border: none;
  background-color: #fff;

  .el-menu-item {
    color: black;
    background-color: #fff;
    height: 40px;
    border-radius: 6px;
  }

  .el-sub-menu .el-menu-item {
    background-color: white;
  }

  .el-menu-item.is-active {

    background-color: var(--el-color-primary-light-8)
  }
}

:deep(.vue-office-pdf-wrapper) {
  background: #fff;
  padding: 20px 10px;
}

.docCol {
  height: 73vh;
  overflow-y: scroll;
}

.iconfont.icon-xiazai {
  font-size: 30px;
  color: var(--el-color-success);
  position: absolute;
  right: 30px;
  bottom: 30px;
  z-index: 10;
}
</style>